<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\helpers\Url;
use yii\bootstrap\Modal;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\CategorySearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Categories';
$this->params['breadcrumbs'][] = $this->title;
?>
    <div class="category-index">

        <h1><?= Html::encode($this->title) ?></h1>
        <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

        <p>
            <!-- Html::a('Create Category', ['create'], ['class' => 'btn btn-success'])-->
            <?= Html::a('创建栏目', ['create'], [
                'class' => 'btn btn-success',
                'id' => 'create',// 按钮的Id
                'data-toggle' => 'modal',// 固定写法
                'data-target' => '#operate-modal'// 等于modal begin中设定model的值
            ]) ?>
        </p>
        <div class="row">
            <div class="col-md-2">
                <?php $form = ActiveForm::begin([
                    'action' => ['index'],
                    'method' => 'get',
                    'id' => 'searchCate',
                    'options' => [
                        'class' => 'from-horizontal'
                    ]
                ]); ?>

                <?= $form->field($searchModel, 'name', [
                    'options' => [
                        'class' => ''],
                    'inputOptions' => [
                        'placeholder' => '栏目搜索',
                        'class' => 'input-sm form-control'],
                ])->label(false) ?>
            </div>
            <span class="input-group-btn">
                     <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
                 </span>
            <?php ActiveForm::end(); ?>
        </div>
        <?= GridView::widget([
            'options' => ['id' => 'category'],
            'dataProvider' => $dataProvider,
            // 'filterModel' => $searchModel,
            'layout' => '{items}<div class="text-right tooltip-demo">{pager}</div>',
            'pager' => [
                //'options'=>['class'=>'hidden']//关闭自带分页
                'firstPageLabel' => "First",
                'prevPageLabel' => 'Prev',
                'nextPageLabel' => 'Next',
                'lastPageLabel' => 'Last',
            ],
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],

                'id',
                'name',
                ['class' => 'yii\grid\ActionColumn',
                    'template' => '{update}  {delete}',
                    'header' => '操作',
                    'buttons' => [
                        'update' => function ($url, $model, $key) {
                            return Html::a("栏目信息", $url, [
                                'title' => '栏目信息',
                                // btn-update 目标class
                                'class' => 'btn btn-default btn-update btn-sm',
                                // 固定写法
                                'data-toggle' => 'modal',
                                // 指向modal中begin设定的id
                                'data-target' => '#operate-modal',
                            ]);
                        },
                        'delete' => function ($url, $model, $key) {
                            return Html::a('删除', $url, [
                                'title' => '删除',
                                'class' => 'btn btn-default btn-sm',
                                'data' => [
                                    'confirm' => '确定要删除么?',
                                    'method' => 'post',
                                ],
                            ]);
                        },
                    ],
                ],
            ],
        ]);
        ?>
    </div>
<?php
// 更新
$requestUpdateUrl = Url::toRoute('update');
$js = <<<JS
    // 更新操作
    $('.btn-update').on('click', function () {
        $('.modal-title').html('栏目信息');
        $('.model-body').html('加载中...');
        $.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
            function (data) {
            debugger;
                $('.modal-body').html(data);
            }  
        );
    });
JS;
$this->registerJs($js);
?>

<?php
Modal::begin([
    'id' => 'operate-modal',
    'header' => '<h4 class="modal-title"></h4>',
]);
Modal::end();

// 异步请求的地址
$requestCreateUrl = Url::toRoute('create');
$js = <<<JS
            // 创建操作
            $('#create').on('click',function() {
              $('.model-title').html('创建栏目');
              $.get('{$requestCreateUrl}',
              function(data) {
                // 弹窗的主题渲染页面
                $('.modal-body').html(data);
              })
            });
JS;
$this->registerJs($js);
?>